<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
    <meta charset="UTF-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
		<title>Inicio</title>
		<link rel="shortcut icon" href="../favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/default.css"/>
                <link rel="stylesheet" type="text/css" href="css/component.css"/>
                <link rel="stylesheet" type="text/css" href="css/panel.css"/>
                <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />
                <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300' rel='stylesheet' type='text/css'/>
		<script src="js/modernizr.custom.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
                </script>
     </h:head>
    <h:body class="cbp-spmenu-push">
        
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
                <h3>BirrApp</h3>
                <a href="#" id="inicio">Inicio</a>
                <a href="buscar.xhtml" id="buscar" onclick="menuItem('buscar');">Buscar</a>
                <a href="favoritos.xhtml" id="favoritos" onclick="menuItem('favoritos');">Favoritos</a>
                <a href="perfil.xhtml" id="perfil" onclick="menuItem('perfil');">Perfil</a>
                <h:form> <h:commandLink action="#{endSessionManagedBean.disconect()}">Desconectar</h:commandLink></h:form>
                
        </nav>

        <div class="container" >	
            
            <div class="main" id="frame">
                
                <p:messages id="messages" showDetail="false" autoUpdate="true"/> 
                
                <h1>Locales Destacados</h1>
                
                <h:form id="form">
                    
                    <p:dataGrid id="dataGridBares" styleClass="inicio" var="bar" value="#{tablaBaresTManagedBean.bares}" columns="1"
                            rows="3" paginator="true"
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink}
                            {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                            rowsPerPageTemplate="3,6,9" currentPageReportTemplate="{currentPage} de {totalPages}" emptyMessage="No se ha podido recuperar ninguna lista de locales" paginatorAlwaysVisible="false">
                        <p:column>                            
                            <p:panel header="#{bar.nombre}">
                                <h:panelGrid columns="3" style="width:100%" columnClasses="barList11,barList12,barList13">

                                    <p:graphicImage id="barImagen" styleClass="imageBar" value="/images/bares/#{bar.foto}"
                                                    width="100" height="100" rendered="#{bar.foto != null}"/>
                                    <p:graphicImage id="barNoImagen" styleClass="imageBar" value="/images/bares/imagenNoDisponible.jpg"
                                                    width="100" height="100" rendered="#{bar.foto == null}"/>

                                    <p:dataTable id="dataTableBarContenido" var="barContenido" 
                                                 value="#{tablaBaresTManagedBean.getColeccionTresBares(bar)}" 
                                                 styleClass="listasCervezasTabla" 
                                                 rowStyleClass="#{barContenido.precio eq tablaBaresTManagedBean.getcervezaMasBarataEnBar(barContenido) ? 'colorRowMasBarata' : null}" >

                                        <p:column headerText="Marca" styleClass="barList21">  
                                            <h:outputText value="#{barContenido.cervezasT.marca}"/>  
                                        </p:column>

                                        <p:column headerText="Tipo" styleClass="barList22">  
                                            <h:outputText value="#{barContenido.cervezasT.tipo}" />  
                                        </p:column>  

                                        <p:column headerText="Vaso" styleClass="barList23">  
                                            <h:outputText value="#{barContenido.vasosT.tipo}" />  
                                        </p:column>  

                                        <p:column headerText="Precio" styleClass="barList24">  
                                            <h:outputText value="#{barContenido.precio} €" />  
                                        </p:column>  

                                        <p:column headerText="Tapa"  styleClass="barList25">  
                                            <h:outputText value="#{barContenido.tapasCervezaT.nombre}" />  
                                        </p:column> 
                                    </p:dataTable>
                                    
                                    <p:commandButton value="Detalles" action="#{tablaBaresTManagedBean.irADetalles}">
                                                <f:setPropertyActionListener value="#{bar}"  
                                                                             target="#{tablaBaresTManagedBean.selectedBar}" /> 

                                    </p:commandButton>
                                </h:panelGrid> 
                            </p:panel>
                        </p:column>
                    </p:dataGrid>
                </h:form>
            </div>
        </div>
        <script src="js/classie.js"></script>
        <script src="js/menu.js"></script>
    </h:body>
</html>
